<style lang="scss" scoped>
.searchInput {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    outline: none;

    // 改变input的placeholder文字的样式
    &::-webkit-input-placeholder {
        color: #fff;
    }

    &:focus {
        border-bottom: 1px solid red;
    }
}
.product{
        width: 98%;
        padding: 20px 1%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .left,
        .right{
            width: 49%;
        }
    }
.p_item {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 11px;
    background-color: #fff;

    .img {
        width: 100%;

        img {
            width: 100%;
        }
    }

    .title {
        width: 100%;
        height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price {

        .icon,
        .money {
            font-size: 12px;
            font-weight: bold;
            color: red;
        }

        .money {
            font-size: 18px;
        }

        .oldMoney {
            font-size: 14px;
            text-decoration: line-through;
            color: #999;
        }
    }

    .hot {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        color: #999;
    }
}
</style>
<template>
    <div class="search">
        <van-nav-bar right-text="搜索" @click-right="getList()">
            <template #title>
                <input class="searchInput" v-model="obj.keyword" type="text" placeholder="请输入要搜索的内容">
            </template>
        </van-nav-bar>
        <div class="product">
            <div class="left">
                <template v-for="(item, index) in product_list">
                    <div class="p_item" :key="index" v-if="index % 2 != 0">
                        <div class="img">
                            <img :src="item.duck_img" alt="">
                        </div>
                        <div class="title">
                            {{ item.duck_name }}
                        </div>
                        <div class="price">
                            <span class="icon">
                                ￥
                            </span>
                            <span class="money">
                                {{ item.duck_min_price }}
                            </span>
                            <span class="oldMoney">
                                ￥ {{ item.duck_no_price }}
                            </span>
                        </div>
                        <div class="hot">
                            <span>
                                销量: {{ item.duck_hot }}
                            </span>
                            <span>
                                库存: {{ item.num > 999 ? '999+' : item.num }}
                            </span>
                        </div>
                    </div>
                </template>
            </div>
            <div class="right">
                <template v-for="(item, index) in product_list">
                    <div class="p_item" :key="index" v-if="index % 2 == 0">
                        <div class="img">
                            <img :src="item.duck_img" alt="">
                        </div>
                        <div class="title">
                            {{ item.duck_name }}
                        </div>
                        <div class="price">
                            <span class="icon">
                                ￥
                            </span>
                            <span class="money">
                                {{ item.duck_min_price }}
                            </span>
                            <span class="oldMoney">
                                ￥ {{ item.duck_no_price }}
                            </span>
                        </div>
                        <div class="hot">
                            <span>
                                销量: {{ item.duck_hot }}
                            </span>
                            <span>
                                库存: {{ item.num > 999 ? '999+' : item.num }}
                            </span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import { getProductList } from '@/api'
export default {
    methods: {
        getList() {
            getProductList(this.obj).then(res => {
                if(res.data.code == 1){
                    this.product_list = res.data.result
                }
            })
        }
    },
    data() {
        return {
            obj: {
                type: 0,
                keyword: '',
                page: 0,
                limit: 10
            },
            product_list: []
        }
    },
}
</script>